<template>
  <el-table :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
    style="min-width: 300px" direction="vertical" stripe>
    <el-table-column label="ID" prop="id">
    </el-table-column>
    <el-table-column label="用户名" prop="username">
    </el-table-column>
    <el-table-column align="right">
      <template slot="header">
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="allow(scope.$index, scope.row)">解封</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from '@/API/request';
import { Message } from 'element-ui';
export default {
  data() {
    return {
      tableData: [],
      search: ''
    }
  },
  methods: {
    allow(index, row) {
      //remove xxx form blacklist
      request.post('/user/admin/unsealUser', {
        adminId: this.$store.state.userInfo.id,
        user: row.id
      }).then(res => {
        if (res.data.code === 200) {
          Message({
            message: '解封成功',
            type: 'success',
            customClass: 'message-global'
          });
          this.tableData.splice(index, 1);
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global'
          });
        }
      }).catch(err => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global'
        });
      })
    }
  },
  mounted() {
    //get blacklist
    request.get('/user/admin/getBannedUserList', {
      params: {
        id: this.$store.state.userInfo.id,
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.tableData = res.data.data;
      } else {
        Message({
          message: res.data.msg,
          type: 'error',
          customClass: 'message-global'
        });
      }
    }).catch(err => {
      Message({
        message: err,
        type: 'error',
        customClass: 'message-global'
      });
    });
  }
}
</script>